<template>
  <div class="item-box border-bottom-1px">
    <div class="left-box">
      <span :class="{'star': mustFill}">{{leftText}}</span>
    </div>
    <div class="middle-box" :style="{width: warnShow ? '30%' : '40%'}">
      <slot name="middledom"></slot>
    </div>
    <div class="tips-box" v-show="warnText" :style="{width: warnShow ? '20%' : '32%'}">
      <span class="warn-icon">!</span><span>{{warnText}}</span>
    </div>
    <div class="right-box" v-if="warnShow" :style="{width: warnShow ? warnText ? '22%' : '42%' : '22%'}">
      <slot name="rightdom"></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    leftText: {
      type: String,
      default: ''
    },
    mustFill: {
      type: Boolean,
      default: false
    },
    warnText: {
      type: String,
      default: ''
    },
    warnShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  }
}
</script>
<style lang='scss' scoped>
.item-box {
  width: 100%;
  height: 0.9rem;
  background: #fff;
  display: flex;
  align-items: center;
  .left-box {
    width: 28%;
    span {
      font-size: 0.28rem;
      line-height: 0.3rem;
      color: rgba(102, 102, 102, 1);
    }
    .star {
      &:after {
        content: "*";
        color: #fd4d4d;
        vertical-align: top;
      }
    }
  }
  .middle-box {
    // width: 30%;
    input {
      width: 100%;
      font-size: 0.24rem;
      line-height: 0.3rem;
      color: #333333;
    }
  }
  .right-box {
    // width: 22%;
    text-align: right;
  }
  .tips-box {
    // width: 20%;
    text-align: right;
    .warn-icon {
      display: inline-block;
      vertical-align: middle;
      width: 0.26rem;
      height: 0.26rem;
      line-height: 0.26rem;
      background: #ff3131;
      border-radius: 50%;
      text-align: center;
      font-size: 0.24rem;
      color: #fff;
      margin-right: 0.04rem;
    }
    span {
      font-size: 0.24rem;
      font-weight: 500;
      color: rgba(255, 49, 49, 1);
      line-height: 0.3rem;
    }
  }
}
</style>
